import {ProColumns, ProFormInstance, ProTable} from '@ant-design/pro-components';
import '@umijs/max';
import { Modal } from 'antd';
import React, {useEffect, useRef} from 'react';

// export type FormValueType = {
//   target?: string;
//   template?: string;
//   type?: string;
//   time?: string;
//   frequency?: string;
// } & Partial<API.RuleListItem>;
//
type Propers = {
  values: API.InterfanceInfo;
  columns: ProColumns<API.InterfanceInfo>[];
  onCancel: () => void; //关闭方法
  onSubmit: (value: API.InterfanceInfoUpdateRequest) => Promise<void>; // 提交方法
  visible: boolean;
};
const UpdateModal: React.FC<Propers> = (props) => {
  const { columns, visible, onCancel, onSubmit, values } = props;
  let refObject = useRef<ProFormInstance>();
  // react 时间监听
  useEffect(()=>{
     if (refObject){
       refObject.current?.setFieldsValue(values)
     }
   },[values])
  return (
    <Modal
      key={'update.Model'}
      visible={visible}
      onCancel={() => {
        console.log('执行cancle方法');
        onCancel?.();
      }}
    >
      <ProTable<API.InterfanceInfo>
        type={'form'}
        columns={columns}
        rowKey="id"
        key={'UpdateModal.Protable'}
        formRef={refObject}
        // form={{
        //   initialValues: values,
        // }} // 只加载一次
        onSubmit={(value: API.InterfanceInfoAddRequest) => {
          console.log('执行submit方法');
          onSubmit?.(value);
        }}
      />
    </Modal>
  );
};

export default UpdateModal;
